<template>
  <div class="drawer">
    <div v-if="taskLoading" class="drawer-loading">
      <a-spin />
    </div>
    <div v-else>
      <div class="drawer-tabs">
        <span :class="tabIndex===0 ? 'active' : ''" @click="goTab(0)">{{ $t('task.form.step.0') }}</span>
        <span :class="tabIndex===1 ? 'active' : ''" @click="goTab(1)">{{ $t('task.form.step.1') }}</span>
        <span :class="tabIndex===2 ? 'active' : ''" @click="goTab(2)">{{ $t('task.form.step.2') }}</span>
        <span :class="tabIndex===3 ? 'active' : ''" @click="goTab(3)">{{ $t('task.form.step.3') }}</span>
      </div>
      <a-form :form="form">
        <div v-if="tabIndex===0">
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.title') }}</label>
            </div>
            <div class="drawer-control">
              <a-form-item>
                <a-input
                  v-model="data.title"
                  :allow-clear="true"
                  :placeholder="$t('enter.please')"
                />
              </a-form-item>
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.topic') }}</label>
            </div>
            <div class="drawer-control">
              <a-form-item>
                <a-input
                  v-model="data.topic"
                  :allow-clear="true"
                  :placeholder="$t('enter.please')"
                />
              </a-form-item>
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.tag') }}</label>
            </div>
            <div class="drawer-control">
              <a-form-item>
                <a-input
                  v-model="data.tag"
                  :allow-clear="true"
                  :placeholder="$t('enter.please')"
                />
              </a-form-item>
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.handler') }}</label>
            </div>
            <div class="drawer-control">
              <a-form-item>
                <a-input
                  v-model="data.handler"
                  :allow-clear="true"
                  :placeholder="$t('enter.please')"
                />
              </a-form-item>
              <p v-html="$t('task.handler.description', {topic: data.topic, tag: data.tag, handler: data.handler})"></p>
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.condition.expression') }}</label>
            </div>
            <div class="drawer-control">
              <a-textarea
                rows="4"
                v-model="data.condition_expression"
                :placeholder="$t('task.condition.expression.placeholder')"
              />
              <p v-html="$t('task.condition.expression.description', {topic: data.topic, tag: data.tag})"></p>
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.remark') }}</label>
            </div>
            <div class="drawer-control">
              <a-form-item>
                <a-textarea
                  rows="4"
                  v-model="data.remark"
                  :placeholder="$t('enter.please')"
                />
              </a-form-item>
            </div>
          </div>
          <div class="drawer-button">
            <a-form-item>
              <a-button type="default" :disabled="true">{{ $t('action.step.prev') }}</a-button>
              <a-button type="primary" @click="submit">{{ $t('action.submit') }}</a-button>
              <a-button type="default" @click="goNext">{{ $t('action.step.next') }}</a-button>
            </a-form-item>
          </div>
        </div>
        <div v-if="tabIndex===1">
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.handler.format') }}</label>
            </div>
            <div class="drawer-control">
              <a-radio-group v-model="data.handler_format">
                <a-radio value="JSON">JSON</a-radio>
                <a-radio value="XML">XML</a-radio>
              </a-radio-group>
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.handler.method') }}</label>
            </div>
            <div class="drawer-control">
              <a-input
                v-model="data.handler_method"
                :placeholder="$t('enter.please')"
              />
              <p v-html="$t('task.handler.method.description')" />
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.handler.timeout') }}</label>
            </div>
            <div class="drawer-control">
              <a-input
                type="number"
                min="1"
                max="30"
                v-model="data.handler_timeout"
                :placeholder="$t('enter.please')"
                :suffix="$t('unit.second')"
              />
              <p v-html="$t('task.handler.timeout.description', {timeout: data.handler_timeout})" />
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.delay.seconds') }}</label>
            </div>
            <div class="drawer-control">
              <a-input
                type="number"
                min="0"
                max="86400"
                v-model="data.delay_seconds"
                :placeholder="$t('enter.please')"
                :suffix="$t('unit.second')"
              />
              <p v-html="$t('task.delay.seconds.description', {seconds: data.delay_seconds, handler: data.handler})" />
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label"><label>{{ $t('task.threads') }}</label></div>
            <div class="drawer-control">
              <a-input
                type="number"
                min="1"
                max="50"
                v-model="data.threads"
                :placeholder="$t('enter.please')"
                :suffix="$t('unit.div')"
              />
              <p v-html="$t('task.threads.description', {threads: data.threads})" />
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label"><label>{{ $t('task.concurrency') }}</label></div>
            <div class="drawer-control">
              <a-input
                type="number"
                min="1"
                max="1500"
                v-model="data.concurrency"
                :placeholder="$t('enter.please')"
                :suffix="$t('unit.message')"
              />
              <p v-html="$t('task.concurrency.description', {total: data.threads * data.concurrency, concurrency: data.concurrency})" />
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label"><label>{{ $t('task.max.retry') }}</label></div>
            <div class="drawer-control">
              <a-input
                type="number"
                min="1"
                max="30"
                v-model="data.max_retry"
                :placeholder="$t('enter.please')"
                :suffix="$t('unit.times')"
              />
              <p v-html="$t('task.max.retry.description', {retry: data.max_retry})" />
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.store') }}</label>
            </div>
            <div class="drawer-control">
              <a-radio-group v-model="data.store">
                <a-radio :value="1">{{ $t('switch.on') }}</a-radio>
                <a-radio :value="0">{{ $t('switch.off') }}</a-radio>
              </a-radio-group>
              <p v-if="data.store===1" v-html="$t('task.store.description')" />
            </div>
          </div>
          <div class="drawer-button">
            <a-button type="default" @click="goPrev">{{ $t('action.step.prev') }}</a-button>
            <a-button type="primary" @click="submit">{{ $t('action.submit') }}</a-button>
            <a-button type="default" @click="goNext">{{ $t('action.step.next') }}</a-button>
          </div>
        </div>
        <div v-if="tabIndex===2">
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.response.format') }}</label>
            </div>
            <div class="drawer-control">
              <a-radio-group v-model="data.handler_response_format">
                <a-radio value="JSON">JSON</a-radio>
                <a-radio value="XML">XML</a-radio>
              </a-radio-group>
              <p v-html="$t('task.response.format.description', {handler: data.handler, format: data.handler_response_format})" />
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label"><label>{{ $t('task.response.expression') }}</label></div>
            <div class="drawer-control">
              <a-textarea
                rows="4"
                v-model="data.handler_response_expression"
                :placeholder="$t('task.response.expression.placeholder')"
              />
              <p v-html="$t('task.response.expression.description', {handler: data.handler, format: data.handler_response_format})"></p>
            </div>
          </div>
          <div class="drawer-item">
            <div class="drawer-label">
              <label>{{ $t('task.failed') }}</label>
            </div>
            <div class="drawer-control">
              <a-form-item>
                <a-input
                  v-model="data.failed"
                  :allow-clear="true"
                  :placeholder="$t('task.failed.placeholder')"
                />
              </a-form-item>
              <p v-if="data.failed !== ''" v-html="$t('task.failed.description', {format: data.handler_response_format, retry: data.max_retry, method: data.failed_method, handler: data.failed})"></p>
            </div>
          </div>
          <div v-if="data.failed !== ''">
            <div class="drawer-item">
              <div class="drawer-label">
                <label>{{ $t('task.failed.method') }}</label>
              </div>
              <div class="drawer-control">
                <a-form-item>
                  <a-input
                    v-model="data.failed_method"
                    :allow-clear="true"
                    :placeholder="$t('enter.please')"
                  />
                </a-form-item>
                <p v-html="$t('task.failed.method.description')" />
              </div>
            </div>
            <div class="drawer-item">
              <div class="drawer-label">
                <label>{{ $t('task.failed.timeout') }}</label>
              </div>
              <div class="drawer-control">
                <a-input
                  type="number"
                  min="1"
                  max="30"
                  v-model="data.failed_timeout"
                  :placeholder="$t('enter.please')"
                  :suffix="$t('unit.second')"
                />
                <p v-html="$t('task.failed.timeout.description', {timeout: data.failed_timeout})" />
              </div>
            </div>
            <div class="drawer-item">
              <div class="drawer-label">
                <label>{{ $t('task.failed.response.format') }}</label>
              </div>
              <div class="drawer-control">
                <a-radio-group v-model="data.failed_response_format">
                  <a-radio value="JSON">JSON</a-radio>
                  <a-radio value="XML">XML</a-radio>
                </a-radio-group>
              </div>
            </div>
            <div class="drawer-item">
              <div class="drawer-label"><label>{{ $t('task.failed.response.expression') }}</label></div>
              <div class="drawer-control">
                <a-textarea rows="4" v-model="data.failed_response_expression" :placeholder="$t('task.failed.response.expression.placeholder')" />
                <p v-html="$t('task.failed.response.expression.description', {handler: data.handler, format: data.handler_response_format})"></p>
              </div>
            </div>
          </div>
          <div class="drawer-button">
            <a-button type="default" @click="goPrev">{{ $t('action.step.prev') }}</a-button>
            <a-button type="primary" @click="submit">{{ $t('action.submit') }}</a-button>
            <a-button type="default" @click="goNext">{{ $t('action.step.next') }}</a-button>
          </div>
        </div>
        <div v-if="tabIndex===3">
          <div class="drawer-item">
            <div class="drawer-label"><label>{{ $t('task.succeed') }}</label></div>
            <div class="drawer-control">
              <a-form-item><a-input v-model="data.succeed" :allow-clear="true" :placeholder="$t('task.succeed.placeholder')" /></a-form-item>
              <p v-if="data.succeed !== ''" v-html="$t('task.succeed.description', {format: data.handler_response_format, method: data.succeed_method, handler: data.succeed})"></p>
            </div>
          </div>
          <div v-if="data.succeed !== ''">
            <div class="drawer-item">
              <div class="drawer-label"><label>{{ $t('task.succeed.method') }}</label></div>
              <div class="drawer-control">
                <a-form-item>
                  <a-input
                    v-model="data.succeed_method"
                    :allow-clear="true"
                    :placeholder="$t('enter.please')"
                  />
                </a-form-item>
                <p v-html="$t('task.succeed.method.description')" />
              </div>
            </div>
            <div class="drawer-item">
              <div class="drawer-label">
                <label>{{ $t('task.succeed.timeout') }}</label>
              </div>
              <div class="drawer-control">
                <a-input
                  type="number"
                  min="1"
                  max="30"
                  v-model="data.succeed_timeout"
                  :placeholder="$t('enter.please')"
                  :suffix="$t('unit.second')"
                />
                <p v-html="$t('task.succeed.timeout.description', {timeout: data.succeed_timeout})" />
              </div>
            </div>
            <div class="drawer-item">
              <div class="drawer-label">
                <label>{{ $t('task.succeed.response.format') }}</label>
              </div>
              <div class="drawer-control">
                <a-radio-group v-model="data.succeed_response_format">
                  <a-radio value="JSON">JSON</a-radio>
                  <a-radio value="XML">XML</a-radio>
                </a-radio-group>
              </div>
            </div>
            <div class="drawer-item">
              <div class="drawer-label"><label>{{ $t('task.succeed.response.expression') }}</label></div>
              <div class="drawer-control">
                <a-textarea rows="4" v-model="data.succeed_response_expression" :placeholder="$t('task.succeed.response.expression.placeholder')" />
                <p v-html="$t('task.succeed.response.expression.description', {handler: data.handler, format: data.handler_response_format})"></p>
              </div>
            </div>
          </div>
          <div class="drawer-button">
            <a-button type="default" @click="goPrev">{{ $t('action.step.prev') }}</a-button>
            <a-button type="primary" @click="submit">{{ $t('action.submit') }}</a-button>
            <a-button type="default" :disabled="true">{{ $t('action.step.next') }}</a-button>
          </div>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script>
import { editTask, getTaskDetail } from '@/api/v1'

export default {
  data () {
    return {
      data: {},
      form: this.$form.createForm(this),
      tabIndex: 0,
      tabIndexDefault: 0,
      tabIndexMax: 3,
      taskEditing: false,
      taskId: 0,
      taskLoading: false
    }
  },
  methods: {
    close () { this.$emit('update:close') },
    goTab (index) {
      if (index >= 0 && index <= this.tabIndexMax) {
        this.tabIndex = index
      }
    },
    goNext () { this.goTab(this.tabIndex + 1) },
    goPrev () { this.goTab(this.tabIndex - 1) },
    loadTask () {
      this.taskLoading = true
      getTaskDetail({ id: this.taskId }, (res) => {
        this.data = res.data
        this.tabIndex = this.tabIndexDefault
      }, null, () => {
        this.taskLoading = false
      })
    },
    submit () {
      this.taskEditing = true
      editTask(this.data, () => {
        this.taskEditing = false
        this.$emit('update:submit')
      }, (err) => {
        this.taskEditing = false
        this.$message.error(err)
      })
    }
  },
  mounted () { this.taskId = this.origin.id; this.loadTask() },
  name: 'EditTask',
  props: { origin: { type: Object, required: true } },
  watch: { origin: { handler (data) { this.taskId = data.id; this.loadTask() } } }
}
</script>
